<template>
  <div class="layout">
    <el-container v-if="state.showMenu" class="container" >
      <el-aside class="aside">
            <div class="head">
                <div>
                <img src="http://127.0.0.1:8000/api/upload/logo.png" alt="logo">
                <span>组卷系统</span>
                </div>
            </div>
          <div class="line" />
          <div class="aside_body">
            <el-menu  class="el-menu-vertical-demo" background-color="#ffffff">
                <template v-for="courseitem in state.categoryData" :key="courseitem.id">         
                    <el-menu-item v-if="courseitem.chapters.length===0"                        
                        :key="courseitem.id" :index="courseitem.id.toString()">                    
                        <template #title>
                            <span>{{ courseitem.name }}</span>
                        </template>
                    </el-menu-item>
                    <el-sub-menu v-if="courseitem.chapters.length > 0"  :key="courseitem.id" :index="courseitem.id.toString()">
                        <template #title>
                          <router-link :to="{ path:'/getQuestionsByCourse', query: {id: courseitem.id}}">{{ courseitem.name}}</router-link>
                        </template>
                    
                        <template v-for="chapteritem in courseitem.chapters" :key="chapteritem.id" >
                            <el-menu-item v-if="chapteritem.sections.length===0"                               
                                :key="chapteritem.id"  :index="chapteritem.id.toString()">                     
                                <template #title>
                                    <span>{{ chapteritem.name }}</span>
                                </template>
                            </el-menu-item>                        
                            <el-sub-menu v-if="chapteritem.sections.length > 0"  :key="chapteritem.id" :index="chapteritem.id.toString()">
                                <template #title>
                                  <router-link :to="{ path:'/getQuestionsByChapter', query: {id: chapteritem.id}}">{{ chapteritem.name}}</router-link>
                                </template>
                                <template v-for="sectionitem in chapteritem.sections" :key="sectionitem.id">
                                    <el-menu-item v-if="sectionitem.knowledgepoints.length===0"                                        
                                        :key="sectionitem.id" :index="sectionitem.id.toString()">      
                                        <template #title>
                                            <span>{{ sectionitem.name }}</span>
                                        </template>
                                    </el-menu-item>                        
                                    <el-sub-menu v-if="sectionitem.knowledgepoints.length > 0" :key="sectionitem.id" :index="sectionitem.id.toString()">
                                        <template #title>
                                          <router-link :to="{ path:'/getQuestionsBySection', query: {id: sectionitem.id}}">{{ sectionitem.name}}</router-link>
                                        </template> 
                                        <template v-for="knowledgepointitem in sectionitem.knowledgepoints" :key="knowledgepointitem.id">
                                            <el-menu-item 
                                            :index="knowledgepointitem.id.toString()"
                                            @click="SelectKnowledge(knowledgepointitem.id)">                                                
                                              {{ knowledgepointitem.name }}                                            
                                            </el-menu-item>
                                        </template>              
                                    </el-sub-menu>
                                </template>
                            </el-sub-menu>
                        </template>
                    </el-sub-menu>
                </template>          
            </el-menu>
          </div>
      </el-aside>
      <el-container class="content">
        <div class="content_head">
            <Header />
        </div>
        <div class="main">
          <router-view />
        </div>
        <Footer />
      </el-container>
    </el-container>
    <el-container v-else class="container">
        <router-view></router-view>
    </el-container>
  </div>
</template>


<script setup>
import { onMounted, reactive } from "@vue/runtime-core"
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
import { useRoute, useRouter } from "vue-router";
import { localGet, pathMap } from '@/utils'
import axios from '@/utils/axios'
const noMenu = ['/login','/signin']
const router =useRouter()
const route =useRoute()
const state = reactive({
    showMenu: true,   //是否需要显示左侧的目录
    loading: false,
    categoryData: [],
    total:0,
    currentPage:1,
    pageSize:10,
    select_knowledge_id: 0, 
})
onMounted(()=>{
    getCategory()
})
const getCategory=()=>{
    state.loading=true
    axios.get('/courses').then(res => {
        if (res.code==200){
            state.categoryData = res.data.results
            state.loading = false                   
        }else{       
            console.log("error", res.message)      
        state.loading = false
        }
    })
    .catch((error)=>{
        console.log("error")
    })
}

router.beforeEach((to, from, next)=>{
    if(to.path == '/login' || to.paht == '/signin'){
        next()
    }else{
        if(!localGet('token')){
            next({path:'/login'})
        }else{
          next()
        }
    }
    state.showMenu = !noMenu.includes(to.path)
    
})
const verifyToken = ()=> {
  axios.get('/VerifyToken/').then(res => {
        if (res.code==200){
            return true               
        }else{
            return false
        }        
    })
    .catch((error)=>{
        console.log("error")
    })
}
const SelectKnowledge = (id)=> {
  router.push({path:'/getQuestionsByKnowledgepoint', query:{ id: id}})
  state.select_knowledge_id = id
}
const handSelect = (key,keyPath) => {
  console.log(key, keyPath)
}

const handleOpen = (key,keyPath) => {
  console.log(key, keyPath)
}
const handleClose =  (key,keyPath) => {
  console.log(key, keyPath)
}
</script>


<style scoped>
.layout {
  min-height: 100vh;
  background-color: #ffffff;
}
.container {
  height: 100vh;
}
.aside {
  width: 230px!important;
  background-color: #fcf2e6;
}
.head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.head > div {
  display: flex;
  align-items: left;

}

.head img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.head span {
  font-size: 20px;
  color: #100f0f;
}
.aside_body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.aside_body el-menu-item-group {
      margin-top: -13px;
}

.aside el-menu-item {
    font-size: 12px;
    min-width: 100%;
    height: 35px;
    line-height: 35px;
}                        



.aside_body span{
  font-size: 10x;
  color: #000;
}
.line {
  border-top: 1px solid hsla(0,0%,100%,.05);
  border-bottom: 1px solid rgba(0,0,0,.2);
}

.content {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: hidden;
  z-index:1;
}
.main {
  height: calc(100vh - 100px);
  overflow: auto;
  padding: 10px;
}
.content_head{
    z-index:2;
}
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a{
  text-decoration: none;
  color: #000;
}
.router-link-active {
  text-decoration: none;
  color:rgb(22, 20, 24);
}
</style>